<?
        require_once('../inc/facebook.php');
		require_once('../inc/products.php');
        $facebook = new Facebook(array(
                'appId' => '133491496805876',
                'secret' => '75ca045c26d2ad30854e7cde4ebffa94'
        ));
       
        $fbUser = $facebook->getUser();
        //echo $facebook->getAccessToken();
		
		$results = GetProducts();
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../inc/bootstrap.css">
    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script type = "text/javascript" src="inc/drop.js"></script>
    <link href="inc/styles.css" rel="stylesheet" type="text/css" />
    <link href="inc/dropstyle.css" rel="stylesheet" type="text/css" />
    <title>Potcake: A Dogumentary</title>
    <style type="text/css" >
            .error { color: red; }
                    input.error { border-color: red; }
                    .item {
                            width: 150px;
                            float: left;
                            margin: 5px;
                    }
                    .cart {
                            clear: both;
                            float: right;
                    }
                    .cart img {
                            width: 20px;
                    }
                    .img-wrapper{
                            height: 150px;
                    }
            </style>
</head>

<body>
    
    <div id ="content">
    	<header>
        	<? include('inc/header.php'); ?>
        </header>
        
    	<nav>
    		<? include('inc/nav.php'); ?>
        </nav>

        <div id="shop">
        
			<script id="cart_template" type="text/x-handlebars-template">
              <ul class="unstyled cart">
              {{#each items}}
                    {{> t_cart_item}}
              {{/each}}            
              </ul>
            </script>
            
            <script id="cart_item_partial_template" type="text/x-handlebars-template">
              <li id="cart_item_{{id}}">
                    <img src="media/{{id}}.jpg"/>
                {{id}}
                    <input type="number" name="quantity" value="{{count}}" />
              </li>
            </script>
            
            <script id="cart_template" type="text/x-handlebars-template">
					  <ul class="unstyled cart">
						  {{#each items}}
								{{> t_cart_item}}
						  {{/each}}            
					  </ul>
        		</script>
				<script id="cart_item_partial_template" type="text/x-handlebars-template">
                   	  <li id="cart_item_{{id}}">
                      <img src="media/{{id}}.jpg"/>
                      {{id}}
                      <input type="number" name="quantity" value="{{count}}" />
                  </li>
                </script>
                
             <div id="products">
             
				 <? while($rs = $results->fetch_assoc()): ?>
                        <div class="item">
                                <div class="img-wrapper">
                                        <img src="media/<?=$rs['id']?>.jpg" />                        
                                </div>
                                <h6>
                                        <?=$rs['ProductName']?>
                                </h6>
                                <h5>Price: <?=$rs['Price']?></h5>
                                <a class="add-to-cart-link" href="../Api/Cart.php?id={{id}}">
                                        <img src="media/add_to_cart.jpg" />
                                </a>
                        </div>  
                <? endwhile; ?>
            </div>
            <div style="clear: both"></div>
            
            <div id="right">
            
            	<div id="twitter-feed">
                <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                <script>
                      new TWTR.Widget({
                          version: 2,
                          type: 'profile',
                          rpp: 4,
                          interval: 30000,
                          width: 300,
                          height: 300,
                          theme: {
                              shell: {
                                  background: '#eeeeee',
                                  color: '#000000'
                              },
                              tweets: {
                                  background: '#ffffff',
                                  color: '#000000',
                                  links: '#87C9C7'
                              }
                          },
                          features: {
                              scrollbar: true,
                              loop: false,
                              live: false,
                              behavior: 'all'
                          }
                      }).render().setUser('PotcakeNation').start();
                </script>
            </div>

            </div>
            
            <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
            </script>
            
			<script type="text/javascript">
                    $(function(){
                            var t_cart = Handlebars.compile($("#cart_template").html());
                            var t_cart_item = Handlebars.compile($("#cart_item_partial_template").html());
                            var t_products = Handlebars.compile($("#products_template").html());
                            Handlebars.registerPartial('t_cart_item', t_cart_item);
                           
                           
                            $.get('../Api/Products.php', function(data){
                                                    $("#contents").html(t_products(data));
                            },'json');
                           
                            $.get('../Api/Cart.php', function(data){
                                        var values = $.map( data, function( value, index ) {
                                          return value;
                                        });
                                            $("#contents").before(t_cart({items: values}));                
                            },'json');
                           
                            $(".add-to-cart-link").live('click',function(){
                                    $.post(this.href, {_method: 'POST', count: 1}, function(data){
                                            if($("#cart_item_" + data.id).length > 0)
                                                            $("#cart_item_" + data.id).replaceWith(t_cart_item(data));
                                            else
                                                            $(".cart").append(t_cart_item(data));
                                    },'json');
                                    return false;
                            });
                    })
            </script>
        </div>
        
        <footer>
            <div id="copyright">
                &copy Atomic Lizard Services 2012
            </div>
            <div id="icons">
                <? include('inc/icons.php'); ?>
            </div>
        </footer>
    </div>
    
    
        

</body>

</html>